<template>
	<view class="core-box">
		<view class="top-zw"></view>

		<!-- 1，无消息背景 -->
		<view class="not-msg-bg" v-if="topList.length == 0 && notTopList.length == 0">
			<view>
				<image :src="require('@/static/img/msg/home/notMsg.svg')"></image>
			</view>
			<view><text>暂无消息</text></view>
		</view>
		<view class="top-title" v-else>
			<text>消息列表</text>
		</view>

		<!-- 2，消息列表 -->
		<!-- <scroll-view scroll-y="true" :style="{'height':chatScrollHeight}">
</scroll-view> --> 
			<view class="list-top" v-for="(item,index) in topList" :key="index">
				<message-item-top :msgData="item" @longpressItem="longpressItem"></message-item-top>
			</view>
			<!-- 3.2，非置顶消息 -->
			<view class="list-not-top" v-for="(item,index) in notTopList" :key="'not' + index">
				<message-item-nottop :msgData="item" @longpressItem="longpressItem"></message-item-nottop>
			</view>
			
			<!-- <view>1</view><view>1</view><view>1</view><view>1</view><view>1</view><view>1</view><view>1</view><view>1</view>
			<view>1</view><view>1</view><view>1</view><view>1</view><view>1</view><view>1</view><view>1</view><view>1</view>
			<view>1</view><view>1</view><view>1</view><view>1</view><view>1</view><view>1</view><view>1</view><view>1</view>
			<view>1</view><view>1</view><view>1</view><view>1</view><view>1</view><view>1</view><view>1</view><view>1</view>
			<view>1</view><view>1</view><view>1</view><view>1</view><view>1</view><view>1</view><view>1</view><view>1</view>
			<view>1</view><view>1</view><view>1</view><view>1</view><view>1</view><view>1</view><view>1</view><view>1</view>
			<view>1</view><view>1</view><view>1</view><view>1</view><view>1</view><view>1</view><view>1</view><view>2</view>
			 -->
		
	</view>
</template>

<script>
	import messageItemNottop from './message-item-nottop.vue'
	import messageItemTop from './message-item-top.vue'

	export default {
		props: {
			topList: {
				type: Array,
				default: () => []
			},
			notTopList: {
				type: Array,
				default: () => []
			},
			chatScrollHeight: {
				type: String,
				default: ''
			}
		},
		components: {
			messageItemNottop,
			messageItemTop
		},
		data() {
			return {

			}
		},
		methods: {
			//1，长按展示
			longpressItem(item) {
				this.$emit('longpressItem', item)
			}
		}
	}
</script>

<style lang="scss" scopde>
	.core-box {
		// padding-bottom: 100rpx;
	}

	.top-zw {
		width: 100%;
		height: 10px;
		// background-color: red;
	}

	.top-title {
		width: 94%;
		font-size: 25rpx;
		padding: 0 3%;
		height: 35px;
		line-height: 35px;
		background-color: #fff;
		border-bottom: 1rpx solid #eee;
	}

	.not-msg-bg {
		width: 100%;
		text-align: center;
		position: absolute;
		top: 50%;
		transform: translate(0, -50%);

		image {
			width: 80%;
		}

		text {
			font-size: 44rpx;
			font-weight: 500;
			color: #8295a5;
		}
	}
</style>